<template>
  <div>
    <vxe-modal v-model="isVisiable" width="75vw" show-footer :mask="false">
      <template #title>
        <span class="text-bold">选择药敏模板</span>
      </template>
      <template #default>
        <Splitpanes style="height:65vh;">
          <Pane size="35">
            <div style="height:100%">
              <vxe-table ref="drugResultTemplateRef" show-overflow :loading="loading" auto-resize resizable height="auto" :data="drugResultTemplateList" :row-config="{isCurrent:true}" @current-change="tableCellClick" @cell-click="drugResultTemplateClick">
                <!-- <vxe-column type="radio" width="30" align="center">
                  <template #radio="{ row, checked }">
                    <span class="custom-radio" :class="checked?'text-green':''" @click.stop="setSelectRow(row)">
                      <i v-if="checked" class="vxe-icon-success-circle-fill"></i>
                      <i v-else class="vxe-icon-success-circle"></i>
                    </span>
                  </template>
                </vxe-column> -->
                <vxe-column type="checkbox" width="30" align="center"></vxe-column>
                <vxe-column type="seq" width="30"></vxe-column>
                <vxe-column field="templateNo" title="编号" width="60"></vxe-column>
                <vxe-column field="templateNa" title="药敏模板名称" min-width="120"></vxe-column>
              </vxe-table>
            </div>
          </Pane>
          <Pane size="65">
            <div style="height:100%">
              <vxe-table ref="drugResultTempdetailRef" :loading="detailloading" show-overflow auto-resize resizable height="auto" :data="drugResultTempdetailList" :row-config="{isCurrent:true}">
                <vxe-column field="seq" title="顺序" width="50"></vxe-column>
                <vxe-column field="antPropGroupDictNa" title="分组" width="60"></vxe-column>
                <vxe-column field="astTestMthDictNa" title="方法" width="60"></vxe-column>
                <vxe-column field="antNa" title="抗生素" min-width="100"></vxe-column>
                <vxe-column field="astTestMthDictNa" title="药敏实验方法" width="110"></vxe-column>
                <vxe-column field="interCodeDictNa" title="敏感性" width="110"></vxe-column>
                <vxe-column field="defResult" title="默认结果" width="80"></vxe-column>
                <vxe-column field="breakPoint" title="折点" width="80"></vxe-column>
                <vxe-column field="r" title="耐药" width="80"></vxe-column>
                <vxe-column field="i" title="中介" width="80"></vxe-column>
                <vxe-column field="sdd" title="剂量依赖型敏感" width="180"></vxe-column>
                <vxe-column field="s" title="敏感" width="80"></vxe-column>
                <vxe-column field="ecoff" title="流行病学界值" width="180"></vxe-column>
              </vxe-table>
            </div>
          </Pane>
        </Splitpanes>

      </template>
      <template #footer>
        <vxe-button @click="cancelEvent">关闭</vxe-button>
        <vxe-button status="primary" @click="confirmEvent">确定</vxe-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, getCurrentInstance, defineProps } from "vue";
import { Splitpanes, Pane } from 'splitpanes';
import { formatDateTime, IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';


let { proxy }: any = getCurrentInstance();
let isVisiable = ref(false);
let drugResultTemplateList: any[] = reactive([]);/**流程方案集合 */
let drugResultTempdetailList: any[] = reactive([]);/**流程方案节点集合 */
const props = defineProps({});
const drugResultTemplateRef = ref(null);/**流程方案列表对象 */
const drugResultTempdetailRef = ref(null);/**流程方案节点列表对象 */
let loading = ref(false);/**药敏模板加载中 */
let detailloading = ref(false);/**药敏模板明细加载中 */
defineExpose({
  showModal,/**打开选择方案的弹窗 */
});
/**流程方案单元格点击事件 */
function drugResultTemplateClick({ row, rowIndex }) {
  drugResultTemplateRef.value?.setRadioRow(row);
}
/**流程方案行单选按钮选中事件 */
function setSelectRow(row) {
  drugResultTemplateRef.value?.setRadioRow(row);

}
/**加载药敏模板 */
function findDrugTemplate() {
  loading.value = true;
  drugResultTemplateList.length = 0; /**放入数据前清空数据*/
  const url = '/api/bac/bac-drug-result-template/findBacDrugResultTemplateList';
  proxy.$http
    /**注意此处的数据条数*/
    .get(url, { params: { keyWords: '' } })
    .then(async (res: any) => {
      drugResultTemplateList.push(...res.data);
      loading.value = false;
      if (res && res.data && res.data.length > 0) {
        tableCellClick({ row: res.data[0] });
      }
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('获取药敏模板列表数据异常', VxeNotifyType.error);
    });
}
/**表格选中当前行*/
async function tableCellClick({ row }) {
  await drugResultTemplateRef.value?.setCurrentRow(row);
  await drugResultTemplateRef.value?.setRadioRow(row);
  //加载模板明细
  findDrugTempDetail(row);
}
/**获取药敏模板明细 */
function findDrugTempDetail(templateObj) {
  detailloading.value = true;
  drugResultTempdetailList.length = 0; /**放入数据前清空数据*/
  const url = '/api/bac/bac-drug-result-tempdetail/findBacDrugResultTempdetailList';
  /**注意此处的数据条数*/
  const a = {
    keyWords: '', templdateNo: !IsEmpty(templateObj.templateNo) ? templateObj.templateNo : '123!@#'
  };
  proxy.$http.get(url, { params: a })
    .then(async (res: any) => {
      drugResultTempdetailList.push(...res.data);
      detailloading.value = false;
      if (res && res.data && res.data.length > 0) {
        tableDetailCellClick({ row: res.data[0] });
      }
      detailloading.value = false;
    })
    .catch((err: any) => {
      detailloading.value = false;
      VxeMessage('获取药敏模板明细列表数据异常', VxeNotifyType.error);
    });
}
/**明细行选中事件 */
async function tableDetailCellClick({ row }) {
  await drugResultTempdetailRef.value?.setCurrentRow(row);
}
/**页面初始化/切换显示隐藏 */
function showModal() {
  isVisiable.value = true;
  findDrugTemplate();
}
/**确认选择 */
function confirmEvent() {
  const rows = drugResultTemplateRef.value?.getCheckboxRecords(true);
  proxy.$emit('confirm', rows);
  isVisiable.value = false;
}
/**关闭窗体 */
function cancelEvent() {
  isVisiable.value = false;
}

</script>

<style scoped lang="scss">
.custom-radio {
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}
</style>
